<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*css reset 开始*/
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			/*css reset 结束*/
			
			/*common css 开始*/
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			.commonTitle{ color:#009ee0; font-size:80px; line-height:0.8; 
				font-weight:bold; letter-spacing:-5px;
			}
			/*common css 结束*/
			
			/*头部样式 开始*/
			#head{background: white!important;width: 100%;}
			#head .headMain{width: 1100px;height: 80px;margin: 0 auto;position: relative;}
			#head .headMain > .logo{float: left;margin-top: 30px;}
			#head .headMain > .nav{float: right;margin-top: 50px;}
			#head .headMain > .nav > .list > li{float: left;margin-left: 40px;position: relative;}
			#head .headMain > .nav > .list > li .up{color: #000000;position: absolute;width: 0;overflow: hidden;transition:1s width;}
			#head .headMain > .nav > .list > li:hover .up{width: 100%;}
			#head .headMain > .arrow{width: 21px; height: 11px;background: url(img/menuIndicator.png);
										position: absolute;left: 50%;bottom: -11px;transition:1s left;
										z-index: 2;}
			/*头部样式 结束*/
			
			/*内容区样式 开始*/
			#content{background: gray;position: relative;overflow: hidden;width: 100%;}
			#content > .list{position: absolute;left: 0;top:0;width: 100%;transition:1s top;}
			#content > .list > li{position: relative;background-position:50% 50%!important;}
			#content > .list > li > section{width: 1100px;height: 520px;margin: auto;
									position: absolute;left: 0;right: 0;top: 0;bottom: 0;
									}
									
			#content > .list > .home{background: url(img/bg1.jpg) no-repeat;}
			#content > .list > .course{background: url(img/bg2.jpg) no-repeat;}
			
			
				/*第三屏*/
				#content > .list > .works{background: url(img/bg4.jpg) no-repeat;}
				#content > .list > .works  .works1{margin: 50px 0px 100px 50px;}
				#content > .list > .works  .works2{margin-left: 50px;}
				#content > .list > .works  .works2 > .item{float: left;width: 220px;height: 133px;margin: 0 1px;
															position: relative;overflow: hidden;}
				#content > .list > .works  .works2 > .item:last-of-type{width: 332px}
				
				#content > .list > .works  .works2 > .item .mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;
															box-sizing: border-box;padding: 10px;background: #000000;opacity:0;
															color: white;transition:1s opacity;
															}
				#content > .list > .works  .works2 > .item .mask .icon{width: 32px;height: 34px;margin: 0 auto;margin-top: 10px;
																	background: url(img/zoomico.png) no-repeat;
																	transition:1s background-position;
															}
				#content > .list > .works  .works2 > .item img{transition:1s transform;}											
															
															
				#content > .list > .works  .works2 > .item .mask .icon:hover{background-position:0 -35px ;}
				#content > .list > .works  .works2 > .item:hover .mask{opacity:0.8 ;}
				#content > .list > .works  .works2 > .item:hover img{transform: rotate(30deg) scale(1.5);}
				
				#content > .list > .works  .works3{width: 167px;height: 191px;background: url(img/robot.png) no-repeat;
													position: absolute;left: 900px;top: 170px;
													animation: works3Move 4s linear infinite;
													}
				@keyframes works3Move{
					0%{
						transform: translateX(0px) rotateY(0deg);
					}
					49%{
						transform: translateX(-490px) rotateY(0deg);
					}
					50%{
						transform: translateX(-500px) rotateY(180deg);
					}
					100%{
						transform: translateX(0px) rotateY(180deg);
					}
				}
				
				
			#content > .list > .about{background: url(img/bg3.jpg) no-repeat;}
			#content > .list > .team{background: url(img/bg5.jpg) no-repeat;}
			/*内容区样式 结束*/
			
		</style>
		<!--分辨率范围:1200 - 2000-->
	</head>
	<body>
		<section id="wrap">
			<!--流体布局-->
			<header id="head">
				<!--固定布局-->
				<div class="headMain">
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png"/>
						</a>
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									<div class="up"><img src="img/home_gruen.png"/></div>
									<div class="down"><img src="img/home.png"/></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
					<div class="arrow"></div>
				</div>
			</header>
			<section id="content">
				<ul class="list">
					<li class="home">
						<section>home</section>
					</li>
					<li class="course">
						<section>course</section>
					</li>
					<li class="works">
						<section>
							<header class="works1 commonTitle">
								<span>EINBLICK</span> 	<br />
								<span>ERKENNTNIS</span> <br />
								<span>ERGEBNIS</span>	<br />
							</header>
							<div class="works2">
								<div class="item">
									<img src="img/worksimg1.jpg"/>
									<div class="mask">
										<span>我有一头张晓飞,我有两天头张晓飞，我有三头张晓飞</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg2.jpg"/>
									<div class="mask">
										<span>我从来都不骑</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg3.jpg"/>
									<div class="mask">
										<span>突然一天心血来潮</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg4.jpg"/>
									<div class="mask">
										<span>骑他去赶集</span>
										<div class="icon"></div>
									</div>
								</div>
							</div>
							<div class="works3"></div>
						</section>
					</li>
					<li class="about">
						<section>about</section>
					</li>
					<li class="team">
						<section>team</section>
					</li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			//获取dom元素
			var arrowEl = document.querySelector("#head .headMain > .arrow");
			var liNodes = document.querySelectorAll("#head .headMain > .nav > .list > li");
			var upNodes = document.querySelectorAll("#head .headMain > .nav > .list > li .up");
			var firstLiNode  = liNodes[0];
			var firstUpNode  = firstLiNode.querySelector(".up");
			 
			var head = document.querySelector("#head") ;
			var content = document.querySelector("#content") ;
			var cLiNodes = document.querySelectorAll("#content .list > li");
			var cList =  document.querySelector("#content .list");
			
			//同步当前屏的索引   this.index---同步---now   now----不同步---  this.index
			var now =0;
			var timer = 0;
			//内容区
			window.onresize=function(){
				/*
				 调整分辨率
					1.没有点击的时候视口只能出现一屏  contentBind();
					2.点击后视口只能出现一屏  在1的基础上对每一屏的偏移量进行重新调整
					3.小箭头的位置也需要头部
				*/
				contentBind();
				cList.style.top = -now*(document.documentElement.clientHeight - head.offsetHeight)+"px";
				arrowEl.style.left = liNodes[now].offsetLeft + liNodes[now].offsetWidth/2 - arrowEl.offsetWidth/2+"px";
			}
			
			
			//内容区交互
			if(content.addEventListener){
				content.addEventListener("DOMMouseScroll",function(ev){
					ev=ev||event;
					
					//让fn的逻辑在DOMMouseScroll事件被频繁触发的时候只执行一次
					clearTimeout(timer);
					timer = setTimeout(function(){
						fn(ev)
					},200)
					
				});
			}
			content.onmousewheel=function(ev){
					ev=ev||event;
					clearTimeout(timer);
					timer = setTimeout(function(){
						fn(ev)
					},200)
			};
			function fn(ev){
				ev=ev||event;
				
				var dir="";
				if(ev.wheelDelta){
					dir = ev.wheelDelta>0?"up":"down";
				}else if(ev.detail){
					dir = ev.detail<0?"up":"down";
				}
				
				switch (dir){
					case "up":
						if(now>0){
							now--;
							move(now);
						}
						break;
					case "down":
						if(now<cLiNodes.length-1){
							now++;
							move(now);
						}
						break;
				}
			}
			
			
			contentBind();
			function contentBind(){
				content.style.height = document.documentElement.clientHeight - head.offsetHeight+'px';
				for(var i=0;i<cLiNodes.length;i++){
					cLiNodes[i].style.height = document.documentElement.clientHeight - head.offsetHeight+'px';
				}
			}
			 
			 
			//头部交互
			headBind();
			function headBind(){
				firstUpNode.style.width = "100%";
				arrowEl.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth/2 - arrowEl.offsetWidth/2+"px";
				for(var i=0;i<liNodes.length;i++){
					//转绑很重要
					liNodes[i].index = i;
					liNodes[i].onclick=function(){
						//i:liNodes.length 5
						move(this.index);
						now = this.index;
					}
				}
			}
			//动画的核心函数
			move(2);
			function move(index){
				for(var i=0;i<upNodes.length;i++){
					//upNodes[i].style.width="0";
					upNodes[i].style.width="";
				}
				upNodes[index].style.width="100%";
				arrowEl.style.left = liNodes[index].offsetLeft + liNodes[index].offsetWidth/2 - arrowEl.offsetWidth/2+"px";
				cList.style.top = -index*(document.documentElement.clientHeight - head.offsetHeight)+"px";
			}
		}
	</script>
</html>
